<template>
  <div class="home_list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <div > -->
      <li v-for="item in list_home" :key="item.material_id + num">
        <img :src="'https://img10.360buyimg.com/n7/' + item.image_url" alt="" />
        <span class="van-multi-ellipsis--l2">{{ item.ad_title }}</span>
        <div>
          <span>${{ item.pc_price }}</span>
          <span class="sales">销量{{ item.fuzzy_comment_num }}</span>
        </div>
      </li>
      <!-- </div> -->
    </van-list>
  </div>
</template>

<script>
import axios from "axios";

axios.interceptors.request.use(config => {
  if (config.method === 'get') {
    //  给data赋值以绕过if判断
    config.data = true 
  }

  config.headers['Content-Type'] = 'application/json'
  return config
}, err => Promise.reject(err))


export default {
  data() {
    return {
      list_home: [],
      loading: false,
      finished: false,
      num: +new Date() + Math.random(),
      val: 0,
    };
  },
  methods: {
    onLoad() {
      console.log("时间触发");

axios.get("/data/Search.json",{

      }).then((data) => {
        if (this.val < 80) {
          let val_ = this.val;
          console.log("val:" + this.val, "val_", val_);
          this.list_home = [
            ...this.list_home,
            ...data["292"].slice(val_, this.val + 10),
          ];
        } else {
          this.finished = true;
        }

        this.loading = false;
        this.val += 10;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home_list {
  width: 100%;
  li {
    display: inline-block;
    width: 50%;
    height: 270px;

    font-size: 16px;
    div {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      span {
        color: red;
      }
      .sales {
        color: black;
        display: inline-block;
        background: rgba(172, 171, 171, 0.513);
        border-radius: 10px;
        font-size: 12px;
        width: 60px;
        height: 20px;
        text-align: center;
        line-height: 20px;
      }
    }
    img {
      display: block;
      width: 100%;
    }
  }
}
</style>